<template>
  <PageWrapper :contentFullHeight="true" v-loading="compState.loadingRef" loading-tip="加载中..." title="无界微前端例子">
    <WujieVue
      width="100%"
      height="100%"
      name="wujie-app01"
      :url="url"
      :sync="false"
      :beforeLoad="beforeLoad"
      :beforeMount="beforeMount"
      :afterMount="afterMount"
      :beforeUnmount="beforeUnmount"
      :afterUnmount="afterUnmount"
      :loadError="loadError"
    ></WujieVue>
    <!-- <Loading 
          :loading="compState.loading" 
          :absolute="compState.absolute" :theme="compState.theme" 
          :background="compState.background" :tip="compState.tip" /> -->
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { defineComponent, reactive, watchEffect, computed, ref } from 'vue';
  import { Loading, useLoading } from '/@/components/Loading';
  import { PageWrapper } from '/@/components/Page';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();

  const [openFullLoading, closeFullLoading] = useLoading({
    tip: '加载中...',
  });
  
  const compState = reactive({
    absolute: false,
    loading: false,
    // theme: 'dark',
    background: 'rgba(111,111,111,.7)',
    tip: '加载中...',
    loadingRef: false,
  });

  const openLoading = (absolute: boolean) => {
    compState.absolute = absolute;
    compState.loading = true;
    setTimeout(() => {
      compState.loading = false;
    }, 2000);
  }


  const url = ref('//192.168.244.1:7500')
  const beforeLoad = (appWindow: Window) => {
    // openFullLoading()
    compState.loadingRef = true
    // openLoading(false)
    console.log('beforeLoad')
  }

  const beforeMount = (appWindow: Window) => {
    console.log('beforeMount')
    compState.loadingRef = false
  }

  const afterMount = (appWindow: Window) => {
    console.log('afterMount')
  }

  const afterUnmount = (appWindow: Window) => {
    console.log('afterUnmount')
  }

  const beforeUnmount = (appWindow: Window) => {
    console.log('beforeUnmount')
  }

  const loadError = (url: string, e: Error) => {
    console.error(url, e);
    // closeFullLoading()
    compState.loadingRef = false
    createMessage.error('加载应用失败')
  }
</script>
